<template>
  <div style="margin-left: 30px">
    <div style="margin-top: 25px">
      <h1>所有作品</h1>

      <!-- <el-dialog title="作者作品" :visible.sync="dialogTableVisible">
        <el-input v-model="form.nickname" style="width: 140px" />
        <el-button type="primary" @click="qureyzh()">搜索作者昵称</el-button>
        <el-table :data="lbxs2">
          <el-table-column label="作品ID" prop="works2" width="160" />
          <el-table-column label="作品名称" prop="title2" width="100" />
          <el-table-column label="作者昵称" prop="nickname2" width="100" />
          <el-table-column label="作者账号" prop="username2" width="100" />
          <el-table-column label="发布时间" prop="createAt2" width="162" />
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogTableVisible = false"
            >确 定</el-button
          >
          <el-button @click="dialogTableVisible = false">取 消</el-button>
        </div>
      </el-dialog> -->


      <el-table
        :data="
          lbxs.filter(
            (data) =>
              !search || data.zpmc.toLowerCase().includes(search.toLowerCase())
          )
        "
        @cell-mouse-leave="showClickIcon = false"
        @cell-mouse-enter="ncrFormat"
        style="width: 100%"
      >
      <el-table-column label="作品编号" prop="zuopinid" width="160" />
        <el-table-column label="作品ID" prop="works" width="160" />
        <el-table-column label="作品名称" prop="title" width="100" />
        <el-table-column label="作者昵称" prop="nickname" width="100" />
        <el-table-column label="作者账号" prop="username" width="100" />
        <el-table-column label="发布时间" prop="createAt" width="162" />
        <el-table-column label="审批状态" prop="states" :formatter="zhuangtai" width="162" />
        <el-table-column prop="caoz" label="操作" width="300">
          <template slot-scope="scope">
            <el-button
              v-if="showClickIcon == true && scope.row.caoz == rowid"
              @click.stop="showInfo = true"
              size="mini"
              type="primary" 
              >删除</el-button
            >
            <el-button
              v-if="showClickIcon == true && scope.row.caoz == rowid"
              @click="dialogFormVisible = true,banjiang(scope.row)"
              size="mini"
              type="primary" 
              >排名</el-button
            >
            <div v-else>{{ scope.row.caoz }}</div>
          </template>
        </el-table-column>
        
      </el-table>
    </div>
  <!-- 模态框 -->
    <div>
      
      <el-dialog title="作品信息" :visible.sync="dialogFormVisible"  :close-on-click-modal="false">
  <el-form :model="form1">
    <el-form-item label="作品编号" >
      <el-input v-model="form1.zuopinid" autocomplete="off" :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="作品ID" >
      <el-input v-model="form1.works" autocomplete="off" :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="作品名称" >
      <el-input v-model="form1.title" autocomplete="off" :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="作者昵称" >
      <el-input v-model="form1.nickname" autocomplete="off" :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="作者账号" >
      <el-input v-model="form1.username" autocomplete="off" :disabled="true"></el-input>
    </el-form-item>
    <el-form-item label="发布时间">
      <el-date-picker v-model="form1.createAt" type="datetime" placeholder="选择日期" :disabled="true"></el-date-picker>
    </el-form-item>
      
  <el-radio-group v-model="form1.radio">
    <el-radio :label="1">第一名</el-radio>
    <el-radio :label="2">第二名</el-radio>
    <el-radio :label="3">第三名</el-radio>
  </el-radio-group>

  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="tijiao(this),dialogFormVisible=false">确 定</el-button>
  </div>
</el-dialog>
    </div>
    <!-- 模态框end -->
  </div>
</template>

<script>
import { listConfig,mingciWorks } from "@/api/zpxs"; //作品列表works方法
import { parallerdefinition} from "@/api/activiti"; //activiti方法
export default {


  data() {
    return {
      dialogFormVisible: false,
      form1: {
          radio: '', 
          zuopinid: '',
          works: '',
          title: '',
          nickname: '',
          username:'',
          createAt:''
        },
      lbxs: [
        {
          works: "",
          title: "",
          nickname: "",
          username: "",
          createAt: "",
          states:"",
          zuopinid:"",
        },
      ],
      lbxs2: [
        {
          works2: "",
          title2: "",
          nickname2: "",
          username2: "",
          createAt2: "",
          states2:"",
          zuopinid2:"",
        },
      ],
      dialogTableVisible: false,
      form: {
          works: "",
          title: "",
          nickname: "",
          username: "",
          createAt: "",
          states:"",
          zuopinid:"",
      },

      input3: "",
      showClickIcon: false,
      showInfo: false,
      rowid: "",
      rowData: [],

      search: "",
    };
  },
  //网页加载事件
  mounted: function () {
    this.listConfig1();
  },
  methods: {
banjiang(row){
  console.log(row);
  this.form1=row;
},

    zhuangtai: function(row, column) {
      return row.states == "0"
        ? "未审批"
        : row.states == "1"
        ? "审批中"
        : row.states == "3"
        ? "审批不通过"
        : row.states == "2"
        ? "审批完成"
        : row.states == "4"
        ? "奖励发放中"
        : row.states == "5"
        ? "奖励发放完毕"
        :row.states == "6"
        ? "排名中"
         :row.states == "7"
        ? "排名完成"
        :"";
    },
    //点击提交按钮 触发流程定义
    tijiao(){
      console.log("账号："+sessionStorage.getItem("username"));
      //console.log("---"+row.zuopinid);
      let username=sessionStorage.getItem("username");
      let mingci=this.form1.radio;
      let zuopinid=this.form1.zuopinid;
      console.log("登录人账号："+username);
      console.log("名次"+mingci);
      //把奖金装进session
      sessionStorage.setItem("mingci",mingci);
      console.log("作品id："+zuopinid);
      parallerdefinition(zuopinid,username).then((response) => {
        console.log("当前登录人："+username);
        //console.log(response.data);
        alert("申请成功")
        this.listConfig1();
        setTimeout(() => {
            this.listLoading = false
      }, 5 * 1000)
      });
    },
    //根据作者账号查询
    qureyzh() {
      let that = this;
      listConfig(this.lbxs2).then((response) => {
        that.lbxs2 = response.data;
        console.log("11111");
      });
    },
    //列表显示综合查询
    listConfig1(syzp) {
      let that = this;
      mingciWorks(this.lbxs).then((response) => { 
        
        console.log((this.list = response.data));
        that.lbxs = response.data;
        console.log(that.lbxs);
      });
    },
    //操作的显示
    ncrFormat(row) {
      this.showClickIcon = true;
      this.rowid = row.id; //赋值行id，便于页面判断
      this.rowData = row; //把行数据赋值，用于后续操作
    },
  },
};
</script>